<template>
  <div class="floorContainer">
    <div class="floorItem">
      <div class="floorTop">
        <div class="floorTopTitle">{{ cate2.category.name }}</div>
        <div class="floorTopContent">{{ cate2.category.frontName }}</div>
      </div>
      <div class="floorBottom">
        <div class="floorBottomItem" v-for="(c4, index) in cate2.itemList" :key="c4.id" @click="router.push('/detail')">
          <div class="floorBottomUp">
            <div class="word">五色可选</div>
            <van-image
              v-if="c4.topLogo?.logoUrl && c4.topLogo.type === 1"
              class="fix1"
              src="https://yanxuan.nosdn.127.net/static-union/16698653574d07eb.png"
            />
            <van-image
              v-else-if="c4.topLogo?.logoUrl && c4.topLogo.type === 3"
              class="fix3"
              src="https://yanxuan.nosdn.127.net/static-union/1678945986e1f775.png"
            />

            <van-image class="floorBottomUpImg" :src="c4.listPicUrl" />
          </div>
          <div class="floorBottomDown">
            <div class="ccc">
              <!-- <div class="icon">
                <van-image class="floorBottomUpImg" src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" />
              </div>
              <span class="content">{{ c4.name }}</span> -->
              <div class="content">
                <span v-if="c4.preLogo.length"
                  ><van-image class="icon" src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png"
                /></span>
                {{ c4.name }}
              </div>
            </div>
            <!-- 可用红包 -->
            <!-- <div v-if="c4.itemTagList[0]?.name" class="redPackage">{{ c4.itemTagList[0]?.name }}</div> -->
            <div class="redPackage" v-if="c4.itemTagList[0]?.name">
              <span><van-image class="red" src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" /></span>
              {{ c4.itemTagList[0]?.name }}
            </div>
            <!-- 到手价 -->
            <div class="price">
              <span class="price1"
                >{{ c4.finalPriceInfoVO.priceInfo.finalPrice?.prefix }}￥<i class="price2">{{
                  c4.finalPriceInfoVO.priceInfo.finalPrice?.price || c4.finalPriceInfoVO.priceInfo.basicPrice
                }}</i>
                <del v-if="c4.finalPriceInfoVO.priceInfo.counterPrice" class="price3"
                  >￥{{ c4.finalPriceInfoVO.priceInfo.counterPrice }}</del
                >
              </span>
            </div>
            <!-- 满减，新人特惠 -->
            <div class="box" v-if="c4.finalPriceInfoVO.banner?.content || c4.finalPriceInfoVO.banner?.title">
              <div v-if="!c4.finalPriceInfoVO.banner?.title" class="sale">{{ c4.finalPriceInfoVO.banner?.content }}</div>
              <div v-else-if="c4.finalPriceInfoVO.banner?.content && c4.finalPriceInfoVO.banner?.title" class="sale2">
                <div class="left">{{ c4.finalPriceInfoVO.banner?.title }}</div>
                <div class="right">{{ c4.finalPriceInfoVO.banner?.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="tabBarH"></div> -->
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Floor'
})
</script>
<script lang="ts" setup>
import router from '@/router'
import { defineProps } from 'vue'
defineProps(['cate2'])
</script>

<style lang="less" scoped>
.floorContainer {
  //   height: 100%;
  width: 100%;
  background-color: white;
  //   position: relative;
  writing-mode: horizontal-tb;
  .floorItem {
    width: 100%;
    margin-top: 10px;
    // height: 100%;
    background-color: white;
    .floorTop {
      height: 100%;
      height: 60px;
      text-align: center;
      padding-top: 10px;
      .floorTopTitle {
        // margin-top: 10px;
        // padding-bottom: 10px;
        height: 30px;
        font-size: 16px;
        line-height: 40px;
      }
      .floorTopContent {
        height: 30px;
        font-size: 12px;
        color: #999999;
      }
    }
    :deep(.floorBottom[data-v-3590bf7f]) {
      height: 100%;
    }
    .floorBottom {
      height: 300px;
      margin: 0 10px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .floorBottomItem {
        width: 172.5px;

        .floorBottomUp {
          width: 172.5px;
          height: 172.5px;
          position: relative;
          .word {
            width: 15px;
            height: 63px;
            font-size: 12px;
            text-align: center;
            color: #b4a078;
            background-color: #f4f4f4;
            border: 1px solid #b4a078;
            position: absolute;
            z-index: 1;
            margin: 10px 8px;
          }
          .fix1 {
            position: absolute;
            z-index: 1;
            width: 18px;
            height: 18px;
            margin-top: 10px;
            margin-right: 15px;
            right: 0;
          }
          .fix3 {
            position: absolute;
            z-index: 1;
            width: 50px;
            height: 27px;
            margin-top: 10px;
            margin-right: 15px;
            right: 0;
          }
          .floorBottomUpImg {
            width: 172.5px;
            height: 172.5px;
            .van-image__img {
              border-radius: 16px;
            }
          }
        }
        .floorBottomDown {
          .ccc {
            display: flex;
            .content {
              font-size: 13px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              margin-top: 5px;
              .icon {
                width: 15px;
                height: 15px;
                padding-right: 3px;
              }
            }
          }
          .redPackage {
            font-size: 10px;
            margin-top: 5px;
            font-size: 12px;
            width: 66px;
            height: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            .red {
              width: 10px;
              height: 10px;
            }
          }
          .price {
            color: red;
            .price1 {
              font-size: 13.5px;
              .price2 {
                font-size: 19px;
              }
              .price3 {
                font-size: 11px;
                color: #999999;
              }
            }
          }
          .box {
            .sale {
              margin-top: 5px;
              width: 75px;
              height: 20px;
              background-color: red;
              border-radius: 20px;
              font-size: 12px;
              color: white;
              font-weight: bold;
              line-height: 20px;
              text-align: center;
              margin-bottom: 15px;
            }
            .sale2 {
              margin-top: 5px;
              width: 147px;
              height: 20px;
              background-color: #ffe9eb;
              border-radius: 20px;
              font-size: 12px;
              color: red;
              font-weight: bold;
              line-height: 20px;
              text-align: center;
              margin-bottom: 15px;
              display: flex;
              align-content: flex-start;
              .left {
                width: 58px;
                height: 20px;
                background-color: red;
                border-radius: 20px;
                color: white;
                font-size: 12px;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
  // .tabBarH {
  //   // position: absolute;
  //   // bottom: 0;
  //   height: 50px;
  //   width: 375px;
  //   background-color: red;
  //   clear: both;
  // }
}
</style>
